Tipografías gratuitas

Angelic War

Birth of a Hero

VAL Stencil

Please Show Me Love

Champagne & Limousines

Justice

Mullidos, esponjosos, confortables, familiares...

Algunos les llamamos cojines, otros almohadones y casi todos tenemos en casa uno favorito.

RSS, Facebook y Twitter tres iconos que podemos obtener simplemente guardando la imagen en nuestro PC.

También podemos usarlos en casa y adquirirlos en Craftsquatch

Improve Your Images es una herramienta de las que a mi me gustan es decir online, para no tener que descargar e instalar nada. En un minuto o menos podemos mejorar el contraste y color de las fotografías, lo único que hay que hacer es subir la imagen y una vez nos da el resultado guardarla en nuestro PC. Prueba y me dices si estoy exagerando.

Son muchos los que cuando ven una entrada con fuentes para descargar lo primero que preguntan es la forma de añadirlas al blog, no es posible hacerlo ya que son fuentes para utilizar con algún editor sin embargo  hace unos meses llegaron las fuentes de Google Font API una de las sorpresas menos esperadas y más gratificantes por parte de Google y que podemos ver en el directorio de Google Font .

JMiur nos explicaba de forma detallada los pasos a seguir para aplicar las fuentes a nuestro blog y nos descubría la posibilidad de previsualizar las fuentes de forma dinámica antes de tomar la decisión de añadirlas con Google Operating System.

Siguen llegando dudas sobre la forma de añadirlas al blog, la respuesta es que las añadimos con la propiedad font-family donde deseamos mostrarlas y ahí es dónde empieza el juego.

Nos situamos en plantilla justo antes de <b:skin>: y añadimos lo siguiente:

<link href=' http://fonts.googleapis.com/css?family=NOMBRE-DE-LA-FUENTE' rel='stylesheet' type='text/css'/>

Donde NOMBRE-DE-LA-FUENTE lo sustituimos por el nombre de fuente que escogimos en el directorio para el ejemplo escogí Tangerine así que añadimos el nombre en el código anterior y podemos guardar los cambios.

<link href=' http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'/>

Si nuestra fuente tiene espacios en el nombre sustituimos esos espacios con el signo + y si deseamos añadir más de una fuente las separamos con |

<link href=' http://fonts.googleapis.com/css?family=Tangerine|Droid+Sans' rel='stylesheet' type='text/css'/>

Ahora utilizaremos la propiedad font-family pero debemos saber dónde se encuentra esa fuente que deseamos cambiar. Seguimos con ejemplos siempre sobre una plantilla Minima.

Para el título del blog:

#header h1 {
font-family: 'Tangerine', century gothic, verdana;
......
}

Títulos de las entradas:

.post h3 {
font-family: 'Tangerine', century gothic, verdana;
......
}

Títulos de la sidebar:

.sidebar h2 {
font-family: 'Tangerine', century gothic, verdana;
......
}

Si tenemos columnas en el footer:

#col1 h2{
font-family: 'Tangerine', century gothic, verdana;
......
}

#col2 h2{
font-family: 'Tangerine', century gothic, verdana;
......
}

#col3 h2{
font-family: 'Tangerine', century gothic, verdana;
......
}

Desde ayer el diseñador de plantillas dispone de 40 nuevas fuentes así lo publica Blogger in draft y Oloman nos lo cuenta con todo detalle.

Imgr es una herramienta de color que permite a los usuarios cargar una imagen y extraer una muestra en formato hexadecimal de los colores que la componen y posteriormente descargarla

Sentir curiosidad por saber cómo piensa o qué afición tiene esa persona que hay detrás del blog que frecuentamos es algo lógico, ponemos imagen a un nombre y en algunos casos esa imaginación va más allá y nos formamos una idea a veces equivocada y otras no tanto.

Con las entrevistas llegamos a conocer más detalles de la persona, y tan curioso es conocer al entrevistado como al entrevistador. Son personas que me dedicaron unos minutos en su blog y para ellas mi agradecimiento algo que debería haber dicho hace tiempo.

Aunque ya pasó un mes algunos tenemos todavía muy presente los premios 20Blogs, y con motivo de esos premios hace unas semanas Un universitario cualquiera me realizó una entrevista que podemos ver en su blog.
¡ Gracias Manu !

Un gran lujo compartir charla con Carlos Santias de BLOGTECNIA.

Gracias Carlos por esta entrevista y algunas charlas que me descubrieron ese lado humano de la persona que nos habla de portables, widgets y aplicaciones interesantes.

Siempre digo que catalogar un blog como de ayuda es muy discutible por eso me gustó cuando Quiero crear un BLOG dijo que éste es un blog de consulta.Gracias por la entrevista.

En Andrew Valums´blog he visto un efecto creado con jQuery. El resultado es un menú vertical de imágenes con efecto deslizante. Una discreta información de carga se muestra en la parte superior así como la posibilidad de mostrar un tooltip con transparencia sobre la imagen.

El resultado de todo eso nos lo muestra el autor en el siguiente ejemplo.

Lo que hice fue modificar un poco el ancho, pensando que una sidebar suele medir aproximadamente 220px y lo adapté para unas imágenes de 215 x 100

En plantilla edición de HTML añadimos justo antes de ]]></b:skin>

<style type='text/css'>
div.sc_menu_wrapper {
position: relative;
height: 400px; /* height es la altura debe ser mayor que la altura de una imagen para formar el scrollbar. */
width: 220px; /* width es la anchura que no debe ser superior a la sidebar */
margin-top: 30px;
overflow: auto;
}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 215px;
border: 2px rgb(79, 79, 79) solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;

/* color y fondo efecto hover */
color: #fff;
background: rgb(79, 79, 79);
}
.sc_menu a:hover {
border-color: rgb(130, 130, 130);
border-style: dotted;
}
.sc_menu img {
display: block;
border: none;
}
.sc_menu_wrapper .loading { /* estilos de carga */
position: absolute;
top: 50px;
left: 10px;
margin: 0 auto;
padding: 10px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
border: 1px solid rgb(79, 79, 79);
background: #1F1D1D;
}
.sc_menu_tooltip { /* estilos tooltip */
display: block;
position: absolute;
padding: 6px;
font-size: 12px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid rgb(79, 79, 79);
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
}
</style>

En los estilos he añadido lo que podemos cambiar.
Los colores deben ser en rgb.
Sustituimos "Url-enlace" por la url de nuestro enlace y "Url-imagen" por la de nuestras imágenes.

Ahora justo antes de </head> añadimos:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>;

Si ya estamos usando jQuery en la plantilla omitimos el paso anterior.
Copiamos el contenido de este archivo de texto y lo pegamos antes de antes de </head>
Y por último nos queda el HTML, editamos un gadget de HTML y en su interior añadimos:

<div class="sc_menu_wrapper">
<div class="sc_menu">
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
<a title="Título" href="url-enlace"><img src="Url-imagen" alt=""/></a>
</div></div>

Completamos el código anterior añadiendo en title="Título" el texto que se mostrará en el tooltip.
En Url-imagen añadimos la url de cada imagen.
Con Url-enlace lo sustituimos por la url del enlace que vamos a añadir.

Cupcake

6 iconos .icns y .png

Tamaño: 16x16- 32x32 - 64x64 - 128x128 - 256x256 - 512x512

Portfolio

12 Iconos PNG y PSD - Tamaño: 256×256px

REFERENCIA: ArtDesigner.lv

Visto en:wallpapers.com

Hace unos meses en una entrevista de Blogtecnia respondía a una pregunta de Carlos con "No hay metas, ilusiones muchas pero son ilusiones que ayudan a ver las cosas de otro modo.

Esas ilusiones a las que hago referencia se referían a un proyecto que siempre he tenido en mente, algo que rondaba mi cabeza pero nunca me decía a dar ese primer paso.

Ese proyecto ya tiene nombre y se llama hostingparaBlogs es una pequeña sociedad aunque yo prefiero llamarlo llamarlo trabajo en equipo.  Soy, una pequeña pieza de ese equipo formado por grandes profesionales con experiencia en técnicas SEO, PHP, HTML, XHTML y JavaScript.

Hace algo más de un mes que todo se puso en marcha y di a conocer los servicios ofrecidos, el motivo de esta entrada es sobre otro servicio que recientemente ha incorporado hostingparaBlogs se trata del programa de afiliados.

Afiliados

Hay un programa de afiliados que quizás pueda interesaros, con este sistema podemos ganar un dinerillo extra que nunca viene mal. Lo único que debemos hacer es registrarnos y añadir un banner en la sidebar. Más detalles sobre el programa de afiliados.

Ya de paso recordar que en hostingparaBlogs podemos disponer de nuestro propio dominio y servicio de alojamiento y escoger entre tres planes mi primer Hosting - plán Básico - plán Plus

Planes de Hosting

Otros servicios

• WordPress preinstalado (no hacen falta conocimientos previos)

• Creación de páginas web para pequeñas empresas o proyectos personales

• Servicios para Blogger: Diseño e instalación de plantillas, solución a problemas.

Algunas de las preguntas pendientes de respuesta tratan sobre la forma de añadir el formulario de suscripción por E-mail, el que puedo proporcionar es el que tengo añadido a la sidebar y lo podéis usar cambiando donde dice Gemablog (dos veces) por vuestro nombre de usuario en FeedBurner. En un gadget de HTML añadimos lo siguiente:

<style>#fbForm {background: url() no-repeat scroll 10px 10px; margin:-10px auto; padding:10px; width:210px;}#fbForm a.fbSuscribe {margin: 0; padding: 1px 0 0 37px; display: block; color: #111111; font-weight: bold; font-family: verdana; font-size: 12px;}#fbForm a.fbSuscribe:hover {color: #111111;}#fbForm input.fbTexto {background-color: #ffffff; border: 1px dotted #111111; color: #111111; padding: 2px; height: 16px; margin-right: 5px; width: 140px;}#fbForm input.fbBoton { background-color:#C0C0C0; border:1px dotted #990000; color:#333333; cursor:pointer; font-size:10px; height:21px; padding:1px 0 3px;}</style><!--[if IE]><style>#fbForm input.fbTexto {border: 1px solid #CCCCCC; width: 130px;}#fbForm input.fbBoton {border:1px solid #CCCCCC; width: 50px;}#fbForm a.fbContador {display: block; float: none; text-align: right;}</style><![endif]--><form id="fbForm" action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Gemablog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post"><p style="margin-top: 0px; margin-bottom: 0px;color:#333333;font-family:Arial;text-align: center;font-size:80%;">Suscribirse vía mail</p><p style="margin-bottom: 10px;"><input class="fbTexto" name="email" type="text" /><input value="es_ES" name="loc" type="hidden" /><input value="Gemablog" name="uri" type="hidden" /><input class="fbBoton" value="Subscribir" type="submit" /></p>

Hay algunos cambios que se pueden hacer como por ejemplo el texto de Suscribirse Vía mail

<p style="margin-top: 0px; margin-bottom: 0px;color:#333333;font-family:Arial;text-align: center;font-size:80%;">Suscribirse vía mail</p>

En color:#333333 - font-family:Arial;text-align: center y font-size:80% podemos cambiar el color de texto, tipo de fuente, justificar el texto, y tamaño de fuente.

El texto de suscribir lo cambiamos en:

<p style="margin-bottom: 10px;">

<input class="fbTexto" name="email" type="text" />

<input value="es_ES" name="loc" type="hidden" /><input value="Gemablog" name="uri" type="hidden" />

<input class="fbBoton" value="Subscribir" type="submit" />

</p>

Y nos queda el espacio para añadir la cuenta de correo si nos vamos a suscribir.

#fbForm {background: url() no-repeat scroll 10px 10px; margin:-10px auto; padding:10px; width:210px;}

#fbForm a.fbSuscribe {margin: 0; padding: 1px 0 0 37px; display: block; color: #111111; font-weight: bold; font-family: verdana; font-size: 12px;}

#fbForm a.fbSuscribe:hover {color: #111111;}

#fbForm input.fbTexto {background-color: #ffffff; border: 1px dotted #111111; color: #111111; padding: 2px; height: 16px; margin-right: 5px; width: 140px;}

#fbForm input.fbBoton { background-color:#C0C0C0; border:1px dotted #990000; color:#333333; cursor:pointer; font-size:10px; height:21px; padding:1px 0 3px;}

❀ #fbForm podemos hacer que sea más o menos ancho con width
❀ #fbForm input.fbTexto cambiamos los estilos del texto "Buscar"
❀ #fbForm input.fbBoton es el espacio dónde escribimos la direción de correo para suscribirnos.

Se sabrá que todo ha ido bien cuando alguien ingrese su mail y muestre algo así:

strix.org.uk

Ni es un menú, ni un nuevo modelo de plantilla, tampoco el nuevo sistema de alojamiento, simplemente es un generador de recortes de texto que nos permite añadir una imagen de fondo.Y es que una es débil ante estas cosas.

Hace un tiempo vimos la forma de añadir iconos a las etiquetas del post-footer, hoy vamos a añadirle unos sencillos estilos de forma que las resaltaremos.

En edición de html marcamos para expandir la plantilla y buscamos la parte que afecta a las etiquetas.

Resaltado en negrita está la etiqueta <data:label.name/> que es la encargada de generar las etiquetas, a continuación añadiremos lo marcado en color rojo.

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><span class='etiquetas'><data:label.name/></span></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>  , </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=20&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>

Ahí mismo podemos eliminar la coma que separa las etiquetas, está marcado con fondo negro.
Si queremos en el lugar de la coma podemos añadir algo decorativo una imagen o carácter unicode.

<span style="vertical-align: middle; color:#000; font-size:24px;text-shadow: 1px 1px 1px #505050">&#10087;</span>

Guardamos los cambios y añadimos los estilos para las etiquetas justo antes de ]]></b:skin>

.etiquetas {

padding:4px;

color:#ffffff;

opacity:0.6;

text-shadow:0 3px 2px #000000;

background:none repeat scroll 0 0 #990000;

}

.etiquetas: hover {

opacity:0.9;

}

En background cambiamos el color de fondo, el color de fuente en "color" text-shadow lo utilizamos para dar sombra el al texto y opacity para el efecto hover.

Cualquier estilo podemos añadirlo y ver el resultado o seguir cambiando.

.etiquetas {

padding:4px;

color:#ffffff;

-moz-border-radius: 5px 5px 5px 5px;

background:none repeat scroll 0 0 #990000;

text-shadow: -1px -1px 1px #555;

-moz-box-shadow: 3px 3px 3px #000000;

}

.etiquetas:hover {

opacity:0.9;

}

En la entrada anterior añadíamos con CSS efecto gradient a un texto, karla preguntaba si era posible añadir ese mismo efecto al título del blog y la respuesta es si.

Para conseguirlo nos situamos en plantilla edición de HTML y marcamos para expandir la plantilla, buscamos lo siguiente:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>

La etiqueta <data:title/> es la que genera el título del blog, las sustituimos por la siguientes líneas:

<div class='pattern'>
<h1><span/><data:title/></h1>
</div>

Quedaría así:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='pattern'>
<h1><span/><data:title/></h1>
</div>

<b:else/>
<a expr:href='data:blog.homepageUrl'>
<div class='pattern'>
<h1><span/><data:title/></h1>
</div></a>
</b:if>
</b:includable>

Guardamos los cambios y justo antes de ]]></b:skin> añadimos los estilos para el nuevo título:

.pattern {
background:none repeat scroll 0 0 #000000;
margin:30px 0 50px;
padding:30px 0 30px 30px;
}
.pattern h1 {
color:#FFFFFF;
font:bold 600%/100% "Lucida Grande",Arial,sans-serif;
letter-spacing:-6px;
margin:0;
position:relative;
text-transform:uppercase;
}
.pattern h1 span {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjysX0u5kJwgZ3-WDaKKQDAhrYeqRp8mYdH5JvkYWWdR9zhqeJparK9ou2AHQdXEgLSnqAztk3n5zUxrdERtik324s0EZRaCe1AzQaxG5o3fSAS5cP1evW3zenvklvOIRez1I4l/s0/pattern-zebra.png") repeat scroll 0 0 transparent;
display:block;
height:100px;
position:absolute;
width:100%;
}

Si en vista previa comprobamos que la imagen del gradient se visualiza fuera del bloque modificaremos la anchura en width de forma que el ancho sea menor que el que tenemos en header-wrapper.

.pattern h1 span {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjysX0u5kJwgZ3-WDaKKQDAhrYeqRp8mYdH5JvkYWWdR9zhqeJparK9ou2AHQdXEgLSnqAztk3n5zUxrdERtik324s0EZRaCe1AzQaxG5o3fSAS5cP1evW3zenvklvOIRez1I4l/s0/pattern-zebra.png") repeat scroll 0 0 transparent;
display:block;
height:100px;
position:absolute;
width:750px;
}

Cualquier modelo de gradient puede adaptarse al título del blog, bastará con añadir los estilos correspondientes y envolver la etiqueta <data:title/> con la misma clase.Ver ejemplo.

En WebDesignerWall nos muestran una técnica para añadir efecto gradient en texto con CSS y una imagen PNG.

Cada ejemplo contiene el código HTML que lo añadiremos en un gadget también de HTML y los estilos CSS que los incluiremos en plantilla edición de HTML justo antes de ]]></b:skin>

En los estilos he añadido la imagen de los ejemplos, quiere eso decir que si vamos a utilizar alguno de forma definitica es recomendable descargar la imagen, subirla a nuestro servidor y sustituirla por la que hay ahora con el fin de no perder la imagen.

Hello, I'm Shinely

Ver código->

<div class="gradient5">
<h1><span></span>Texto-título</h1>
</div>

.gradient5 {
background:none repeat scroll 0 0 #000000;
margin:30px 0 50px;
padding:30px 0 30px 30px;
}
.gradient5 h1 {
color:#FFFFFF;
font:330%/100% "Lucida Grande",Arial,sans-serif;
letter-spacing:-1px;
margin:0;
position:relative;
}
.gradient5 h1 span {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGOoUlFttSK1UZECKMo_T2KwYiv8a_Nc4D_KuhVCB_ScJCy9YYv0HAYh3O0YH5YUg_Xyzf6kAu-XwPr0Mfy_6Dgl81jILxB9UXKet1AsrCnnMdprg_hvv8oTAo-UUaSkfGXE91/s0/gradient-shine.png") repeat-x scroll 0 0 transparent;
display:block;
height:64px;
position:absolute;
width:100%;
}

Vertical Stripe

Ver código->

<div class="gradient6">
<h1><span></span>Texto-título</h1>
</div>

.gradient6 {
background:none repeat scroll 0 0 #000000;
margin:30px 0 50px;
padding:30px 0 30px 30px;
}
.gradient6 h1 {
color:#FFFFFF;
font:bold 310%/100% "Lucida Grande",Arial,sans-serif;
letter-spacing:-2px;
margin:0;
position:relative;
text-transform:uppercase;
}
.gradient6 h1 span {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhht8f_h1LxNRlfqRBsPfagDf5-uXEt1XkCb_i_xk7nxu6ow6ocMdbYFTonl6AUar0if-FI5-aUX7VvhSvBSZsi_mF1cHZB05-AupO9qOTByqmWm6j4ktkYNTyZaV3Yy1iZpJYN/s0/gradient-dark-stripe.png") repeat-x scroll 0 0 transparent;
bottom:-0.1em;
display:block;
height:29px;
position:absolute;
width:100%;
}

Horizontal Stripe

Ver código->

<div class="gradient7">
<h1><span></span>Texto título</h1>
</div>

.gradient7 {
background:none repeat scroll 0 0 #000000;
margin:30px 0 50px;
padding:30px 0 30px 30px;
}
.gradient7 h1 {
color:#FFFFFF;
font:bold 310%/100% "Lucida Grande",Arial,sans-serif;
letter-spacing:-2px;
margin:0;
position:relative;
text-transform:uppercase;
}
.gradient7 h1 span {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhht8f_h1LxNRlfqRBsPfagDf5-uXEt1XkCb_i_xk7nxu6ow6ocMdbYFTonl6AUar0if-FI5-aUX7VvhSvBSZsi_mF1cHZB05-AupO9qOTByqmWm6j4ktkYNTyZaV3Yy1iZpJYN/s0/gradient-dark-stripe.png") repeat-x scroll 0 0 transparent;
bottom:-0.1em;
display:block;
height:29px;
position:absolute;
width:100%;
}

Wow, Zebra

Ver código->

<div class="pattern">
<h1><span></span>Texto-título</h1>
</div>

.pattern {
background:none repeat scroll 0 0 #000000;
margin:30px 0 50px;
padding:30px 0 30px 30px;
}
.pattern h1 {
color:#FFFFFF;
font:bold 600%/100% "Lucida Grande",Arial,sans-serif;
letter-spacing:-6px;
margin:0;
position:relative;
text-transform:uppercase;
}
.pattern h1 span {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjysX0u5kJwgZ3-WDaKKQDAhrYeqRp8mYdH5JvkYWWdR9zhqeJparK9ou2AHQdXEgLSnqAztk3n5zUxrdERtik324s0EZRaCe1AzQaxG5o3fSAS5cP1evW3zenvklvOIRez1I4l/s0/pattern-zebra.png") repeat scroll 0 0 transparent;
display:block;
height:100px;
position:absolute;
width:100%;
}

Gem@ BLOG

Al bloque "pattern" le añadimos un color de fondo en este caso es negro.
Los estilos del texto los tenemos en "pattern h1" y es ahí donde añadimos el color que se mostrará para el texto.

Con "pattern h1 span" añadimos la imagen que debe ser de fondo transparente, en formato PNG. la idea es que al tratarse de una imagen transparente permitirá visualizar el color del texto dando la sensación que es un texto con imagen.

Lo principal que debemos tener en cuenta es que el color predominante de la imagen será el mismo color que añadiremos al fondo del bloque "pattern" para que no se visualice la imagen que no cubre la totalidad del texto.

Para entenderlo un poco mejor el siguiente ejemplo sería el mismo que el anterior pero en lugar de añadir color negro de fondo que es el color que contiene la imagen añadimos color gris.

Gem@ BLOG

Se dice que la noche de Halloween, la puerta que separaba el mundo de los vivos del Más Allá se abría y los espíritus de los difuntos hacían una procesión en los pueblos en los que vivían.En esa noche los espíritus visitaban las casas de sus familiares, y para que los espíritus no les perturbasen los aldeanos debían poner una vela en la ventana de su casa por cada difunto que hubiese en la familia. Si había una vela en recuerdo de cada difunto los espíritus no molestaban a sus familiares, si no era así los espíritus les perturbaban por la noche y les hacían caer entre terribles pesadillas.

En España cada vez son más los que se suman a esta fiesta, son sobre todo los más pequeños los que esperan con impaciencia que llegue el día para disfrazarse y son también los que lógicamente más la disfrutan.

Buscando una imagen para ilustrar la entrada he encontrado ideas decorativas para este día.

Algunas hasta comestibles y ya he empezado a verlo más festivo.

De la decoración pasamos por la mesa y como no, por el blog.

Plantilla Halloween

Iconos Halloween